<template>
  <div class="outer">
    <div class="title">填写报名信息</div>
    <hr />
    <div class="introduce">
      <p>考试名称：称职英语</p>
      <p>考试期数：2020下半年</p>
      <p>考试时间：2020-12-15 10:00</p>
      <p>主办单位：国家人社局</p>
      <p>考试费：65元</p>
    </div>

    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      :rules="rules"
      class="cpplication"
    >
      <el-row :gutter="100">
        <!-- 姓名 -->
        <el-col :span="12">
          <el-form-item label="姓名" prop="name" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <!-- 性别 -->
        <el-col :span="12">
          <el-form-item label="性别" prop="sex" size="mini">
            <el-select v-model="form.sex" style="width: 100%">
              <el-option label="男" value="boy"></el-option>
              <el-option label="女" value="girl"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 文化程度 -->
        <el-col :span="12">
          <el-form-item label="文化程度" prop="degree" size="mini">
            <el-select v-model="form.degree" style="width: 100%">
              <el-option label="本科" value="undergraduate"></el-option>
              <el-option label="大专" value="juniorCollege"></el-option>
              <el-option label="初中" value="middle"></el-option>
              <el-option label="小学" value="primary"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 身份证号码 -->
        <el-col :span="12">
          <el-form-item label="身份证号码" prop="IdNumber" size="mini">
            <el-input v-model="form.IdNumber"></el-input>
          </el-form-item>
        </el-col>
        <!-- 电话号码 -->
        <el-col :span="12">
          <el-form-item label="电话号码" prop="telphone" size="mini">
            <el-input v-model="form.telphone"></el-input>
          </el-form-item>
        </el-col>
        <!-- 毕业院校 -->
        <el-col :span="12">
          <el-form-item label="毕业院校" prop="graduate" size="mini">
            <el-input v-model="form.graduate"></el-input>
          </el-form-item>
        </el-col>
        <!-- 毕业时间 -->
        <el-col :span="12">
          <el-form-item label="毕业时间" prop="time" size="mini">
            <el-input v-model="form.time"></el-input>
          </el-form-item>
        </el-col>
        <!-- 学校 -->
        <el-col :span="12">
          <el-form-item label="学校" prop="school" size="mini">
            <el-input v-model="form.school"></el-input>
          </el-form-item>
        </el-col>
        <!-- 工作经验 -->
        <el-col :span="24">
          <el-form-item label="工作经验" size="mini">
            <el-input type="textarea" v-model="form.experience"></el-input>
          </el-form-item>
        </el-col>
        <!-- 身份证 -->
        <el-col>
          <p>报考附件：</p>
          <!-- 身份证正面 -->
          <el-form>
            <el-row>
              <el-form-item class="positive">
                <el-col :span="10">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                    :class="{ hide: hideUp }"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog>
                    <img width="100%" alt="" />
                  </el-dialog>
                </el-col>
                <div class="btnB">
                  <el-col :span="6">
                    <div>身份证正面</div>
                  </el-col>
                  <el-col :span="4">
                    <el-button size="small" @click="upload" :disabled = "(fileList.length === 0) ? true:false ">上传</el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button size="small" @click="del" :disabled = "(fileList.length === 0) ? true:false ">删除</el-button>
                  </el-col>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
          <!-- 身份证反面 -->
          <el-form>
            <el-row>
              <el-form-item class="positive">
                <el-col :span="10">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                    :class="{ hide: hideUp }"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog>
                    <img width="100%" alt="" />
                  </el-dialog>
                </el-col>
                <div class="btnB">
                  <el-col :span="6">
                    <div>身份证正面</div>
                  </el-col>
                  <el-col :span="4">
                    <el-button
                      size="small"
                      @click="upload"
                      aria-disabled=""
                      :disabled = "(fileList.length === 0) ? true:false "
                 >上传</el-button
                    >
                  </el-col>
                  <el-col :span="4">
                    <el-button size="small" @click="del"  :disabled = "(fileList.length === 0) ? true:false ">删除</el-button>
                  </el-col>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <div class="btn">
          <el-button type="info" @click="comfirm">确认报名提交按钮</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hideUp: false,
      fileList: [],
      form: {
        name: "",
        sex: "女",
        degree: [],
        IdNumber: "",
        telphone: "",
        graduate: "",
        time: "",
        school: "",
        experience: "",
      },
      tableDataItem: [],
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2到10 个字符", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u2E80-\u9FFF]+$/,
            message: "姓名不支持特殊字符",
            trigger: "blur",
          },
        ],
        telphone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        IdNumber: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            required: true,
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        time: [{ required: true, message: "请输入时间", trigger: "blur" }],
        graduate: [
          { required: true, message: "请输入毕业院校", trigger: "blur" },
        ],
        school: [{ required: true, message: "请输入学校", trigger: "blur" }],
        degree: [
          { required: true, message: "请输入文化程度", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.tableDataItem = JSON.stringify(localStorage.getItem("tableDataItem"));
    // console.log(this.tableDataItem)
  },
  methods: {
    upload(fileList) {
      this.hideUp = true;
      this.hideUp = fileList.length == 1
      
      this.$message.success("上传成功");
    },
    del() {
      this.hideUp = false;
      this.$message.success("删除成功");
    },
    comfirm(){
      this.$message.success("提交成功，待审核过后可交费")
    }
  },
};
</script>


<style lang="scss" scoped>
.outer {
  width: 70%;
  margin: 50px auto;
  border: 1px solid black;
}
.cpplication {
  border-top: 1px solid black;
  padding-top: 20px;
  width: 90%;
  margin: 10px auto;
}
.introduce p {
  font-size: 12px;
}
.introduce {
  margin-left: 60px;
}
.title {
  margin-left: 15px;
}
.btn {
  width: 100%;
  text-align: center;
}
.positive {
  height: 180px;
  //    display: flex;
  //    align-items: flex-end;
  // position: absolute;
  // bottom: 0;
  background: #f5f5f5;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 20px;
}
.IdRight {
  padding-top: 100px;
}
.introduce {
  margin-top: 20px;
}
.gril img {
  width: 80%;
}
.btnB {
  padding-top: 100px;
}
</style>